<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
        <link href="../img/icon.ico" rel="shortcut icon"/>
		<link rel="stylesheet" href="../layui/css/layui.css" />
        <link rel="stylesheet" href="../css/element.min.css?1" />
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css">
        <link rel="stylesheet" href="../css/reset.css?3123">
        <link rel="stylesheet" href="../css/setlayui.css?12">
        <link rel="stylesheet" href="../css/viewer.min.css">
		<script src="../layui/layui.all.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript" src="../js/element.min.js"></script>
        <script src="../js/viewer.min.js"></script>
	</head>
	<body>
        <div id="app" class="page-container" style="display: none;" v-show="showApp">
            <div class="cell_cont">
                <div class="form_box">
                    <div class="form_name must_input">姓名</div>
                    <div class="form_cont">
                        <el-tooltip class="item" effect="dark" :disabled="!basicinfo.name" :content="basicinfo.name" placement="top">
                            <el-input class="public_input" placeholder="请输入内容" v-model="basicinfo.name" clearable> </el-input>
                        </el-tooltip>
                    </div>
                </div>
                <div class="form_box">
                    <div class="form_name must_input">手机号</div>
                    <div class="form_cont">
                        <el-tooltip class="item" effect="dark" :disabled="!basicinfo.phone" :content="basicinfo.phone" placement="top">
                            <el-input class="public_input" placeholder="请输入内容" v-model="basicinfo.phone" clearable> </el-input>
                        </el-tooltip>
                    </div>
                </div>
                <div class="form_box">
                    <div class="form_name must_input">身份证号</div>
                    <div class="form_cont">
                        <el-tooltip class="item" effect="dark" :disabled="!basicinfo.idCard" :content="basicinfo.idCard" placement="top">
                            <el-input class="public_input" placeholder="请输入内容" v-model="basicinfo.idCard" clearable> </el-input>
                        </el-tooltip>
                    </div>
                </div>
                <div class="form_box">
                    <div class="form_name">登录账号</div>
                    <div class="form_cont" style="color:#FA7355;">保存后自动生成</div>
                </div>
            </div>
            <div class="but_box">
				<el-button @click="cancels" class="cancelClass">取消</el-button>
				<el-button @click="confirms" type="primary" style="margin-left: 120px">提交</el-button>
            </div>
        </div>
		<script src="../js/public.js?1234"></script>
		<script>
			var layer = layui.layer
			var vm = new Vue({
				el: '#app',
				data() {
					return {
                        showApp: false,
                        basicinfo: {
                            name: '',
                            idCard: '',
                            phone: ''
                        }
					};
				},
				methods: {
                    cancels () {
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                    },
                    confirms () {
                        var that = this
                        if (this.basicinfo.name.length == 0) {
                            this.$message({
                                message: '请输入姓名',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        if (this.basicinfo.phone.length == 0) {
                            this.$message({
                                message: '请输入手机号',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        if (!PhoneValidate(this.basicinfo.phone)) {
                            this.$message({
                                message: '手机号格式错误',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        if (this.basicinfo.idCard.length == 0) {
                            this.$message({
                                message: '请输入身份证号',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        if (!IdCardValidate(this.basicinfo.idCard)) {
                            this.$message({
                                message: '身份证号格式错误',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        xLoading(true, '正在提交')
                        $.ajax({
                            type: 'post',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            url: baseUrl + '/ConstructionPlan/AddCompanyUser',
                            data: JSON.stringify({
                                name: this.basicinfo.name,
                                idCard: this.basicinfo.idCard,
                                phone: this.basicinfo.phone,
                            }),
                            dataType: 'json',
                            success: function(res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                that.$message({
                                    message: '已保存',
                                    type: 'warning',
                                    duration: 1000
                                });
                                setTimeout(function () {
                                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                    parent.layer.close(index);
                                }, 500)
                            }
                        });
                    }
				},
				mounted() {
                    this.showApp = true;
                    // getQuerys()
				}
			});
		</script>
	</body>
	<style>
		.page-container {
            padding-bottom: 70px;
            position: relative;
            padding: 0 40px;
        }
        .but_box {
            position: absolute;
            left: 0;
            bottom: 0;
        }
        .cell_cont {
            display: flex;
            flex-wrap: wrap;
        }
        .form_box {
            width: 50%;
        }
        .form_box {
            display: flex;
            margin-top: 20px;
            align-items: center;
        }
        .form_name {
            line-height: 32px;
            width: 104px;
            min-width: 104px;
            padding-right: 10px;
            text-align: right;
        }
        .form_cont {
            display: flex;
            align-items: center;
            line-height: 1;
            flex: 1;
            flex-wrap: wrap;
        }
	</style>
</html>
